<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>教育考试平台_在线考试</title>
    <link href="/css/examMain.css" rel="stylesheet" type="text/css"/>
    <link href="/css/iconfont.css" rel="stylesheet" type="text/css"/>
    <link href="/css/test.css" rel="stylesheet" type="text/css"/>

    <style>
        .hasBeenAnswer {
            background: #5d9cec;
            color: #fff;
        }
        .addButton {
            padding: 0 10px;
            cursor: pointer;
            float: right;
            height: 24px;
            line-height: 24px;
            background: #389fc3;
            color: #fff;
            border-radius: 30px;
            display: block;
            margin-top: 5px;
        }


    </style>
</head>

<body>
<div class="main">
    <!--nr start-->
    <div class="test_main">
        <div class="nr_left">
            <div class="test">
                <form action="" method="post">
                    <div class="test_content">
                        <div class="test_content_title">
                            <h2>添加试卷信息</h2>
                        </div>
                    </div>
                    <div class="test_content_nr">
                        <ul>
                            <li >
                                <div class="test_content_nr_tt">
                                    <i></i><span>标题：</span>
                                    <input id="title" type="text" style="width: 86%; height: 20px;">
                                    <span class="addButton" onclick="submitPaper()">添加</span>
                                </div>
                                <div class="test_content_nr_main">
                                    <ul>
                                        <li class="option">
                                            <input type="radio" style="margin: 6px 10px 0 0;" id="answer_option_1" value="A" class="radioOrCheck" name="answer"/>
                                            <label for="answer_option_1" >
                                                <span>A.</span>
                                                <p class="ue" style="display: inline;">
                                                    <input id="A" type="text" style="width: 92%;float: right;height: 25px;margin: 1px 0 0 0;" value="">
                                                </p>
                                            </label>
                                        </li>

                                        <li class="option">
                                            <input type="radio" style="margin: 6px 10px 0 0;" id="answer_option_2" value="B" class="radioOrCheck" name="answer"/>
                                            <label for="answer_option_2" >
                                                <span>B.</span>
                                                <p class="ue" style="display: inline;">
                                                    <input id="B" type="text" style="width: 92%;float: right;height: 25px;margin: 1px 0 0 0;" value="">
                                                </p>
                                            </label>
                                        </li>

                                        <li class="option">
                                            <input type="radio" style="margin: 6px 10px 0 0;" id="answer_option_3" value="C" class="radioOrCheck" name="answer"/>
                                            <label for="answer_option_3" >
                                                <span>C.</span>
                                                <p class="ue" style="display: inline;">
                                                    <input id="C" type="text" style="width: 92%;float: right;height: 25px;margin: 1px 0 0 0;" value="">
                                                </p>
                                            </label>
                                        </li>

                                        <li class="option">
                                            <input type="radio" style="margin: 6px 10px 0 0;" id="answer_option_4" value="D" class="radioOrCheck" name="answer"/>
                                            <label for="answer_option_4" >
                                                <span>D.</span>
                                                <p class="ue" style="display: inline;">
                                                    <input id="D" type="text" style="width: 92%;float: right;height: 25px;margin: 1px 0 0 0;" value="">
                                                </p>
                                            </label>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <div class="test_content_title">
                        <div class="test_content_nr_main">
                            <ul>
                                <li class="option">

                                    <label id="bappend" for="answer_option_1">
                                    </label>
                                </li>


                            </ul>
                        </div>
                    </div>

                </form>
            </div>

        </div>
        <div class="nr_right">
            <div class="nr_rt_main">
                <div class="rt_nr1">
                    <input type="hidden" id="categoryId">
                    <div class="rt_nr1_title">
                        <h1>
                            时间设置：
                        </h1>
                        <p class="test_time">
                            <select id="time" name="time" style="height: 38px;width: 122px;">
                                <c:forEach items="${times}" var="time">
                                    <option value="${time.code}">${time.value}</option>
                                </c:forEach>
                            </select>
                        </p>
                    </div>


                    <div class="rt_nr1_title"  style="margin-top: 5px;">
                        <h1>
                            分数设置：
                        </h1>
                        <p class="test_time">
                            <select id="scope" name="scope" style="height: 38px;width: 122px;">
                                <c:forEach items="${scopes}" var="scope">
                                    <option value="${scope.scopeCode}">${scope.scopeValue}</option>
                                </c:forEach>
                            </select>
                        </p>
                    </div>


                    <div class="rt_nr1_title" style="margin-top: 5px;">
                        <h1>
                            专业设置：
                        </h1>
                        <p class="test_time">
                            <select id="major"  name="major" style="height: 38px;width: 122px;">
                                <c:forEach items="${majors}" var="major">
                                    <option value="${major.majorCode}">${major.majorName}</option>
                                </c:forEach>
                            </select>
                        </p>
                    </div>

                    <div class="rt_nr1_title" style="margin-top: 5px;">
                        <h1>
                            出题人：
                        </h1>
                        <p class="test_time">

                            <input type="text" id="author" name="author" style="height: 38px;width: 122px;"/>

                        </p>
                    </div>

                    <div class="rt_content">
                        <div class="rt_content_tt">

                            <span onclick="addCategory()" class="addButton">添加</span>
                        </div>
                        <div class="rt_content_nr answerSheet">
                            <ul>

                            </ul>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!--nr end-->
    <div class="foot"></div>
</div>

<script src="/js/jquery-1.11.3.min.js"></script>
<script src="/js/jquery.easy-pie-chart.js"></script>
<!--时间js-->
<script src="/js/jquery.countdown.js"></script>
<script>

    window.jQuery(function ($) {
        "use strict";

        $('time').countDown({
            with_separators: false
        });
        $('.alt-1').countDown({
            css_class: 'countdown-alt-1'
        });
        $('.alt-2').countDown({
            css_class: 'countdown-alt-2'
        });

    });

    $(function () {
        $('li.option label').click(function () {

            var examId = $(this).closest('.test_content_nr_main').closest('li').attr('id'); // 得到题目ID
            // alert(examId)
            var cardLi = $('a[href=#' + examId + ']'); // 根据题目ID找到对应答题卡
            // 设置已答题
            if (!cardLi.hasClass('hasBeenAnswer')) {
                cardLi.addClass('hasBeenAnswer');
            }

        });
    });

    function submitPaper() {
        var answer;
        var title = $("#title").val();
        // alert(title)
        // $('<p class="ue" style="display: inline;width: 765px;"></p>').append(title).appendTo("#bappend");
        $('input:radio:checked').each(function(){
            answer = $(this).val();
        });
        var checkedLength = ($('input:radio:checked').length);
        if (checkedLength == 0) {
            alert("请选择正确答案");
            return false;
        }
        var title = $("#title").val();
        alert(title)
        var A = $("#A").val();
        var B = $("#B").val();
        var C = $("#C").val();
        var D = $("#D").val();
        alert(D)
        var categoryId = $("#categoryId").val();
        $.ajax({
            url:'/paper/addPaper',
            dataType:'JSON',
            type:'POST',
            data:{
                categoryId:categoryId,
                title:title,
                a:A,
                b:B,
                c:C,
                d:D,
                trueAnswer:answer
            },
            success:function (result) {
               if (result.code == 200) {
                   $("#title").val("");
                   $("#A").val("");
                   $("#B").val("");
                   $("#C").val("");
                   $("#D").val("");
                   $('<p class="ue" style="display: inline;width: 765px;"></p>').append(title).appendTo("#bappend");
                   return;
               } else {
                   alert(result.msg);
                   return;
               }
            }
        });
        console.log(answer);
    }

    // 添加分类
    function addCategory() {
        var time = $("#time").val();
        var scopes = $("#scope").val();
        var major = $("#major").val();
        var author = $("#author").val();
        $.ajax({
            url:'/category/addCategory',
            dataType:'JSON',
            type:'POST',
            data:{
                clazz:major,
                time:time,
                author:author,
                scope:scopes
            },
            success:function (result) {
                if (result.code == 200) {
                    $("#time").attr("disabled",true);
                    $("#scope").attr("disabled",true);
                    $("#major").attr("disabled",true);
                    $("#author").attr("disabled",true);
                    console.log(result);
                    $("#categoryId").val(result.data);
                    alert($("#categoryId").val())
                    return;
                } else {
                    alert(result.msg);
                    return;
                }
            }
        })
    }

</script>


</body>

</html>